<template>
  <div
    class="AIRouter"
    :style="{ left: `${position.x}px`, top: `${position.y}px` }"
    draggable="true"
    @dragstart="onDragStart"
    @drag="onDrag"
    @dragend="onDragEnd"
  >
    <div class="content_box">
      <div class="content">
        <div
          v-for="(item, index) in btnList"
          :key="index"
          @click="clickRoute(item)"
        >
          <span
            class="delimite"
            v-if="index === delimiterIndex && btnList[delimiterIndex - 1]?.type"
          ></span>
          <svg
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            v-if="item.type"
          >
            <g clip-path="url(#clip0_2646_7982)">
              <path
                d="M5.00004 7.90443L9.99184 7.90443L8.74198 6.60068L9.36644 6L11.356 7.98041C11.6604 8.25887 11.4503 8.74345 11.025 8.74345H5.00004V7.90443Z"
                fill="#43D5C7"
              />
              <path
                d="M11.5 10.3638H6.50817L8 11.9095L7.37554 12.5102L5.14403 10.2878C4.83963 10.0094 5.04976 9.52478 5.47499 9.52478L11.5 9.52478V10.3638Z"
                fill="#43D5C7"
              />
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M5.14854 2.18451V1.84356C5.15266 1.48778 5.37955 1.25677 5.73698 1.251C5.99887 1.24647 6.26076 1.24606 6.52266 1.251C6.6149 1.25306 6.65484 1.22053 6.68737 1.13406C6.94556 0.440618 7.56941 1.09533e-05 8.28961 1.09533e-05C8.64109 -0.00125096 8.98431 0.106554 9.27194 0.308561C9.55958 0.510569 9.77746 0.796831 9.89556 1.12788C9.92933 1.21888 9.97092 1.25471 10.0702 1.25142C10.3267 1.24442 10.5841 1.24647 10.8406 1.25142C11.2063 1.25636 11.4327 1.48696 11.4364 1.85262V2.18493H12.4993C13.1194 2.18493 13.5427 2.58559 13.5839 3.20656C13.5865 3.24756 13.5864 3.28856 13.5864 3.32956C13.5864 3.33468 13.5864 3.3398 13.5864 3.34491V13H13.5853V14.1377C13.5853 14.1515 13.5856 14.1652 13.5859 14.1789C13.5864 14.2064 13.587 14.2338 13.5853 14.2613C13.5466 14.8785 13.1171 15.2874 12.5011 15.2883L4.08532 15.2882C3.46929 15.2874 3.03981 14.8785 3.0011 14.2612C2.99945 14.2338 3 14.2063 3.00055 14.1789C3.00082 14.1652 3.0011 14.1514 3.0011 14.1377C2.99945 10.5374 3.00027 6.93661 3.00357 3.33544C3.00273 3.14154 3.04125 2.94948 3.11681 2.77089C3.28687 2.39329 3.59406 2.18945 4.01655 2.18534C4.27555 2.18331 4.53476 2.18372 4.80242 2.18415C4.91606 2.18433 5.03122 2.18451 5.14854 2.18451ZM12.4377 14.3634C12.6436 14.3634 12.6625 14.3449 12.6625 14.1328L12.6634 3.34491C12.6634 3.27761 12.6067 3.10896 12.321 3.10896H11.4402V3.71305C11.4369 4.06512 11.2046 4.30972 10.853 4.31054C9.14763 4.31384 7.4423 4.31384 5.73698 4.31054C5.38573 4.31054 5.15389 4.06347 5.1506 3.71264C5.14778 3.56482 5.14806 3.41701 5.14835 3.26014C5.14845 3.21074 5.14854 3.16044 5.14854 3.10896H4.14173C3.9412 3.10896 3.9239 3.12502 3.9239 3.33009V14.1328C3.9239 14.3448 3.94284 14.3634 4.14873 14.3634L12.4377 14.3634ZM6.07917 3.37662H10.5034V2.16969H9.06911C9.06911 2.10701 9.07048 2.0457 9.07181 1.98539C9.07471 1.85512 9.07749 1.72955 9.06623 1.60514C9.04617 1.42213 8.96089 1.25246 8.82599 1.12717C8.6911 1.00188 8.5156 0.929335 8.33161 0.922814C7.89512 0.90799 7.5447 1.21559 7.51423 1.65126C7.50634 1.76411 7.50887 1.87769 7.5115 1.99565C7.51285 2.05632 7.51423 2.11814 7.51423 2.18163H6.07917V3.37662Z"
                fill="#43D5C7"
              />
            </g>
            <defs>
              <clipPath id="clip0_2646_7982">
                <rect width="16" height="16" fill="white" />
              </clipPath>
            </defs>
          </svg>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="18"
            height="19"
            viewBox="0 0 18 19"
            fill="none"
            v-else
          >
            <path
              d="M6.14854 3.68451C6.14854 3.55727 6.14854 3.45021 6.14854 3.34356C6.15266 2.98778 6.37955 2.75677 6.73698 2.751C6.99887 2.74647 7.26076 2.74606 7.52266 2.751C7.6149 2.75306 7.65484 2.72053 7.68737 2.63406C7.94556 1.94062 8.56941 1.50001 9.28961 1.50001C9.64109 1.49875 9.98431 1.60655 10.2719 1.80856C10.5596 2.01057 10.7775 2.29683 10.8956 2.62788C10.9293 2.71888 10.9709 2.75471 11.0702 2.75142C11.3267 2.74442 11.5841 2.74647 11.8406 2.75142C12.2063 2.75636 12.4327 2.98696 12.4364 3.35262C12.4364 3.45515 12.4364 3.55851 12.4364 3.68493H13.4993C14.1194 3.68493 14.5427 4.08559 14.5839 4.70656C14.5868 4.75268 14.5864 4.79879 14.5864 4.84491C14.5864 8.44114 14.5864 12.0365 14.5864 15.6311C14.5882 15.7544 14.5755 15.8774 14.5485 15.9976C14.4303 16.4831 14.0329 16.7882 13.5268 16.7882C11.3032 16.7882 9.0796 16.7882 6.85598 16.7882H5.08532C4.46929 16.7874 4.03981 16.3785 4.0011 15.7612C3.99863 15.7201 4.0011 15.6789 4.0011 15.6377C3.99945 12.0374 4.00027 8.43661 4.00357 4.83544C4.00273 4.64154 4.04125 4.44948 4.11681 4.27089C4.28687 3.89329 4.59406 3.68945 5.01655 3.68534C5.38551 3.68245 5.75488 3.68451 6.14854 3.68451ZM6.14854 4.60896C5.79811 4.60896 5.46992 4.60896 5.14173 4.60896C4.9412 4.60896 4.9239 4.62502 4.9239 4.83009C4.9239 8.43098 4.9239 12.0319 4.9239 15.6328C4.9239 15.8448 4.94284 15.8634 5.14873 15.8634H11.1278C11.9102 15.8634 12.6893 15.8601 13.47 15.8658C13.6129 15.8658 13.6677 15.8115 13.664 15.6777C13.664 15.6315 13.664 15.5854 13.664 15.5393V4.95239C13.664 4.60896 13.664 4.60896 13.321 4.60896H12.4402C12.4402 4.82433 12.4402 5.02075 12.4402 5.21305C12.4369 5.56512 12.2046 5.80972 11.853 5.81054C10.1476 5.81384 8.4423 5.81384 6.73698 5.81054C6.38573 5.81054 6.15389 5.56347 6.1506 5.21264C6.14689 5.01827 6.14854 4.82391 6.14854 4.60896ZM7.07917 4.87662H11.5034V3.66969H10.0691C10.0691 3.47162 10.0827 3.28714 10.0662 3.10514C10.0462 2.92213 9.96089 2.75246 9.82599 2.62717C9.6911 2.50188 9.5156 2.42933 9.33161 2.42281C8.89512 2.40799 8.5447 2.71559 8.51423 3.15126C8.50229 3.32215 8.51423 3.49468 8.51423 3.68163H7.07917V4.87662Z"
              fill="#43D5C7"
            />
            <path
              d="M6.15472 11.1526V10.2528H12.4274V11.1526H6.15472Z"
              fill="#43D5C7"
            />
            <path
              d="M12.4299 11.8979V12.8038H6.16214V11.8979H12.4299Z"
              fill="#43D5C7"
            />
            <path
              d="M6.15472 14.4427V13.5438H12.4266V14.4427H6.15472Z"
              fill="#43D5C7"
            />
            <path
              d="M7.07958 9.61994V8.69631H6.15884V7.77268H7.0767V6.84576H7.9995V7.7661H8.92807V8.69178H8.00609V9.61994H7.07958Z"
              fill="#43D5C7"
            />
            <path
              d="M12.4286 7.86616H9.89164V6.96024H12.4286V7.86616Z"
              fill="#43D5C7"
            />
            <path
              d="M12.4327 8.60489V9.50299H9.89246V8.60489H12.4327Z"
              fill="#43D5C7"
            />
          </svg>
          {{ item?.title }}
        </div>
      </div>
    </div>
    <img src="@/assets/aiIcon.gif" class="aiIcon" alt="" />
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
const btnList = [
  {
    title: "患者床头卡",
    name: "PatientCard",
  },
  // {
  //   title: "详情",
  //   name: "InspectionTesting",
  // },
  {
    title: "文件管理",
    name: "FileManagement",
  },
  {
    title: "受邀列表",
    name: "InvitedConsultation",
  },
  {
    title: "申请列表",
    name: "RequestConsultation",
  },
];
const clickRoute = (route) => {
  router.push({ name: route.name });
};
const windowSize = reactive({
  width: window.innerWidth,
  height: window.innerHeight,
});
const position = ref({
  x: windowSize.width - 150,
  y: windowSize.height - 200,
}); // 元素当前位置
const offset = ref({ x: 0, y: 0 }); // 鼠标点击位置相对元素的偏移
const onDragStart = (event) => {
  // 保存鼠标与元素的相对位置
  offset.value.x = event.clientX - position.value.x;
  offset.value.y = event.clientY - position.value.y;
};

const onDrag = (event) => {
  if (event.clientX === 0 && event.clientY === 0) return; // 防止拖动结束时事件位置被重置

  // 更新元素位置，使其跟随鼠标移动
  position.value.x = event.clientX - offset.value.x;
  position.value.y = event.clientY - offset.value.y;
};

const onDragEnd = (event) => {
  // 拖动结束时更新位置
  position.value.x = event.clientX - offset.value.x;
  position.value.y = event.clientY - offset.value.y;
};
</script>
<style lang="scss" scoped>
.AIRouter {
  position: absolute;
  z-index: 999;
  .aiIcon {
    position: relative;
    width: 100px;
    height: 100px;
    z-index: 9;
  }
  .content_box {
    position: absolute;
    top: 10px;
    right: 50px;
    display: none;
  }
  .content {
    padding: 15px 20px 5px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 389px;
    min-height: 80px;
    border-radius: 16px;
    background: linear-gradient(
      90deg,
      rgba(26, 26, 26, 0.76) 55.61%,
      rgba(57, 57, 57, 0.67) 100%
    );
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    div {
      display: flex;
      align-items: center;
      margin: 0 10px 10px 0;
      line-height: 20px;
      cursor: pointer;
      svg {
        margin-right: 2px;
      }
    }
    .delimite {
      display: inline-block;
      width: 1px;
      height: 12px;
      background-color: #fff;
      margin-right: 10px;
    }
  }
  &:hover {
    .content_box {
      display: block;
    }
  }
}
</style>
